<template>
	<view>
		<u-loading-page ref="proload"
		loading-text="查询进度中~~"
		:loading="show"
		v-if="show"
		></u-loading-page>
	<view class="content" v-else>
		<view class="title-box">
			<view class="progress afoot"></view>
			<view class="refund-h">
				<view v-if="[10,20].includes(orderefund.refund_state)">退款中</view>
				<view v-if="orderefund.refund_state == 30">退款成功</view>
				<view v-if="[21,31].includes(orderefund.refund_state)">退款失败</view>
				<text v-if="[21,31].includes(orderefund.refund_state)"
					style="color: #CC0022;">失败原因:{{orderefund.refuse_reason}}</text>
				<text v-else>预计1-3个工作日退还到账</text>
			</view>
			<view class="money-td" v-if="[21,31].includes(orderefund.refund_state) !==true ">
				<view>申请退款金额 <text>￥{{orderefund.refund_price}}</text></view>
				<view>实际退款金额 <text style="color: #CC0022;">￥{{orderefund.refunded_price}}</text></view>
				<text style="font-size: 22rpx;color: rgba(102, 102, 102, 0.40);;">申请通过后原路返回至付款账户</text>
			</view>
		</view>
		<view class="stepbar-box">
			<view class="stepbar-h">
				<u-steps :current="String(orderefund.refund_state).charAt(0) - 1" class="setpsshoop"
					activeColor="#025E21">
					<u-steps-item title="申请退款" :desc="orderefund.create_time">
					</u-steps-item>
					<u-steps-item title="商家处理" :desc="orderefund.state_txt"
						:error="orderefund.refund_state == 21"></u-steps-item>
					<u-steps-item title="退款处理" :desc="orderefund.refunded_time || ''"
						:error="orderefund.refund_state == 31"></u-steps-item>
				</u-steps>
			</view>
			<view class="stepbar-column">
				<u-steps :current="orderefund.log.length - 1" direction="column" dot='true' activeColor="#025E21">
					<u-steps-item v-for="item in orderefund.log" :key="item.id" :title="item.title" :desc="item.content"></u-steps-item>
				</u-steps>
			</view>
		</view>
		<view class="details">
			<text style="font-size: 28rpx;">商品详情</text>
			<OrderShopping :orderdetails='orderefund.goods'></OrderShopping>
		</view>
		<!-- 订单详情 -->
		<view class="info-box">
			<view>订单详情</view>
			<view class="info-td">
				<text>订单价格:</text>
				<text style="color: #CC0022;">￥{{orderefund.refund_price}}</text>
			</view>
			<view class="info-td">
				<text>申请时间:</text>
				<text>{{orderefund.create_time}}</text>
			</view>
			<view class="info-td">
				<text>商品数量:</text>
				<text>x{{orderefund.goods[0].goods_number}}</text>
			</view>
			<view class="info-td">
				<text>订单编号:</text>
				<view class="copy">{{orderefund.refund_no}}
					<view>复制</view>
				</view>
			</view>
			<view class="info-td">
				<text>支付方式:</text>
				<text>在线支付</text>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import ordershopping from '../../components/ordershopp.vue'
	import {
		refund
	} from '@/api/place.js'
	export default {
		data() {
			return {
				orderefund: {},
				show:true
			}
		},
		components: {
			OrderShopping: ordershopping
		},
		methods: {
			async getrefund(id) {
				const res = await refund(id)
				this.orderefund = res.data
				this.show = false
			}
		},
		onLoad(el) {
			this.getrefund(el.id)
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fafafa;
	}

	.content {
		padding: 0 40rpx;
		padding-bottom: 80rpx;
	}

	.title-box {
		position: relative;
		margin-top: 30rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;

		.progress {
			position: absolute;
			height: 14rpx;
			top: 0;
			left: 0;
			width: 100%;
			background-color: #025E21;
		}

		.afoot {
			background-color: #999;
		}

		.refund-h {
			font-size: 24rpx;
			color: #999;
			padding: 18rpx 0;
			border-bottom: 1rpx dashed #f2f2f2;

			view {
				color: #333;
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 12rpx;
			}
		}

		.money-td {
			font-size: 26rpx;
			color: #999;
			margin-top: 26rpx;

			view {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
			}
		}
	}

	.stepbar-box {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 50rpx 0 24rpx 0rpx;

		.stepbar-h .data-v-af39e672 .data-v-0ccbcc87 .u-steps-item__content {
			text-align: center;

			.data-v-15831087 {
				justify-content: center !important;
			}
		}

		.stepbar-column {
			padding-left: 54rpx;
			margin-top: 60rpx;

			.u-steps {
				.u-steps-item {
					.u-steps-item__content {
						margin: 20rpx 0;
					}
				}
			}
		}
	}

	.details {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 20rpx 0 20rpx 20rpx;
		border-radius: 20rpx;
	}

	.info-box {
		font-size: 26rpx;
		background-color: #fff;
		padding: 30rpx 24rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;

		.info-td {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			color: #999;

			.copy {
				display: flex;

				view {
					font-size: 16rpx;
					padding: 6rpx 18rpx;
					border: 1px solid #999999;
					border-radius: 10rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>